@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --color-primary: 0 0 0; /* 相当于 rgb(0, 0, 0) 黑色 */
}

@layer base {
  html {
    scroll-behavior: smooth;
  }

  ::selection {
    @apply bg-primary-40;
  }

  ::-webkit-scrollbar {
    @apply w-[0.625rem] bg-background;
  }

  ::-webkit-scrollbar-thumb {
    @apply bg-secondary;
  }
}

@layer components {
  .inner-width {
    @apply max-w-[1300px] mx-auto px-10;
  }

  .section-title {
    @apply text-center mb-20 relative text-2xl pb-5;
  }

  .section-title::before,
  .section-title::after {
    content: '';
    @apply absolute left-1/2 -translate-x-1/2 bg-secondary;
  }

  .section-title::before {
    @apply w-[100px] h-[2px] bottom-0;
  }

  .section-title::after {
    @apply w-[16px] h-[16px] -bottom-2 rounded-full border-[4px] border-background;
  }

  .skill-bar {
    @apply w-full h-2 bg-background relative rounded-full;
  }

  .skill-bar::after {
    content: '';
    @apply absolute left-0 top-0 h-full rounded-full bg-primary;
  }

  .js::after { width: 80%; }
  .vue::after { width: 80%; }
  .react::after { width: 70%; }
  .webgl::after { width: 70%; }
  .spring::after { width: 50%; }
  .mysql::after { width: 50%; }

  .work {
    @apply relative w-[calc(33.33%-20px)] mb-[30px] overflow-hidden rounded-lg;
  }

  .work img {
    @apply w-full h-full transition-transform duration-300;
  }

  .work:hover img {
    @apply scale-110;
  }

  .info {
    @apply absolute left-0 right-0 bottom-0 p-5 bg-white/90 text-center transition-transform duration-300 translate-y-full;
  }

  .work:hover .info {
    @apply translate-y-0;
  }

  .info h3 {
    @apply text-xl font-semibold mb-2;
  }

  .info .cat {
    @apply text-primary font-medium;
  }

  .contact-info .item {
    @apply w-[calc(33.33%-30px)] text-center mb-[60px];
  }

  .contact-info i {
    @apply text-primary text-3xl mb-3;
  }

  .contact-form {
    @apply max-w-[800px] mx-auto text-center;
  }

  .contact-form input,
  .contact-form textarea {
    @apply w-full p-4 bg-background rounded-lg mb-[30px] border-none outline-none;
  }

  .contact-form .nameZone,
  .contact-form .emailZone {
    @apply max-w-[calc(50%-10px)];
  }

  .contact-form .nameZone {
    @apply float-left;
  }

  .contact-form .emailZone {
    @apply float-right;
  }

  .contact-form textarea {
    @apply resize-vertical min-h-[150px];
  }

  .contact-form .btn {
    @apply bg-primary text-white border-none outline-none py-3 px-8 rounded-lg cursor-pointer transition-colors duration-300;
  }

  .contact-form .btn:hover {
    @apply bg-secondary;
  }
}
